<template>
  <div id="o_table">
    <el-table :data="dataList" style="width: 100%" size="mini">
      <el-table-column prop="orderId" label="订单号" width="250">
      </el-table-column>
      <el-table-column prop="orderType" label="订单类型" width="100">
      </el-table-column>
      <el-table-column prop="realName" label="收货人" width="100">
      </el-table-column>
      <el-table-column label="商品信息" width="400" class="tab">
        <template slot-scope="scope">
          <div
            class="tab"
            v-for="(item, index) in scope.row.productList"
            :key="index"
          >
            <div>
              <img class="avatar" :src="item.info.image" alt="" />
            </div>
            <div>
              <span class="txt">{{ item.info.productName }}</span>
            </div>
          </div>
          <!-- {{ scope.row }} -->
        </template>
      </el-table-column>
      <el-table-column prop="payPrice" label="实际支付" width="80">
      </el-table-column>
      <el-table-column prop="payTypeStr" label="支付方式" width="80">
      </el-table-column>
      <el-table-column prop="statusStr.value" label="订单状态" width="80">
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <div>
            <el-button
              type="text"
              size="small"
              @click="settheDelivery(scope.row.orderId)"
              v-if="scope.row.statusStr.value == '未发货'"
              v-Permission="'admin:order:send'"
              >发送货</el-button
            >
            <el-dropdown trigger="click" szie="mini">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="getOrderDetails(scope.row.orderId)"
                  >订单详情</el-dropdown-item
                >
                <el-dropdown-item @click.native="getorderRecord"
                  >订单记录</el-dropdown-item
                >
                <el-dropdown-item @click.native="getOrderNote"
                  >订单备注</el-dropdown-item
                >
                <el-dropdown-item @click.native="getprintReceipts"
                  >打印小票</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="发送货"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 这里是插件 -->
      <el-sendShop :list1="theCompany"></el-sendShop>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 订单详情模块 -->
    <el-dialog
      title="订单信息"
      :visible.sync="theOrderDetails"
      width="40%"
      :before-close="handleClose"
    >
      <el-OrderDetails :obj="OrderList"></el-OrderDetails>
    </el-dialog>
  </div>
</template>

<script>
//引入组件用于发送货
const sendShop = () => import("./sendADelivery.vue");
const OrderDetails = () => import("./OrderDetails.vue");
//引入api
import {
  getcourierCompany,
  getshipperInformation,
  setSend,
  getDeliveryInformation,
} from "@/network/api/order/order";
export default {
  name: "o_table",
  props: {
    dataList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  components: {
    "el-sendShop": sendShop,
    "el-OrderDetails": OrderDetails,
  },
  data() {
    return {
      dialogVisible: false,
      type: "normal",
      theCompany: [],
      Information: {},
      objDetail: {}, //详细信息
      orderNo1: "",
      theOrderDetails: false,
      OrderList: {}, //商品详情的数据
    };
  },
  created() {
    this.$mitt.on("sendShop", (arg) => {
      this.objDetail = arg;
    });
  },
  methods: {
    handleClick(val) {
      console.log(val);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //发送或
    async settheDelivery(orderNo12) {
      this.dialogVisible = true;
      this.orderNo1 = orderNo12;
      let res = await getcourierCompany(this.type);
      this.theCompany = res.data.data;
      let res1 = await getshipperInformation();
      this.Information = res1.data.data;
    },

    //当点击提交时
    submit() {
      this.dialogVisible = false;
      let { objDetail } = this;
      if (objDetail == "") {
        this.$message({
          message: "警告哦，请填写完整信息",
          type: "warning",
        });
        this.dialogVisible = true;
        return;
      }
      let { orderNo1 } = this;
      let { exportToTel, exportToName, exportToAddress } = this.Information;
      if (objDetail.resource == "发货") {
        if (objDetail.manual == "手动填写") {
          if (objDetail.region == "" || objDetail.orderNo == "") {
            this.$message({
              message: "警告哦，请填写完整信息",
              type: "warning",
            });
            this.dialogVisible = true;
            return;
          }
          this.sendShopDetail(
            "",
            "",
            objDetail.region,
            "",
            objDetail.orderNo,
            "1",
            "",
            orderNo1,
            exportToTel,
            exportToName,
            exportToAddress,
            "1"
          );
        } else {
        }
      } else if (objDetail.resource == "送货") {
        if (
          objDetail.deliverymanPhone == "" ||
          objDetail.deliverymanName == ""
        ) {
          this.$message({
            message: "警告哦，请填写完整信息",
            type: "warning",
          });
          this.dialogVisible = true;
          return;
        }
        this.sendShopDetail(
          objDetail.deliverymanName,
          objDetail.deliverymanPhone,
          "",
          "",
          "",
          "1",
          "",
          orderNo1,
          exportToTel,
          exportToName,
          exportToAddress,
          "2"
        );
      } else {
      }
    },
    async sendShopDetail(
      deliveryName,
      deliveryTel,
      expressCode,
      expressName,
      expressNumber,
      expressRecordType,
      expressTempId,
      orderNo,
      toAddr,
      toName,
      toTel,
      type
    ) {
      let res = await setSend(
        deliveryName,
        deliveryTel,
        expressCode,
        expressName,
        expressNumber,
        expressRecordType,
        expressTempId,
        orderNo,
        toAddr,
        toName,
        toTel,
        type
      );
      console.log(res);

      this.$mitt.emit("sendCode", res.data.code);
    },

    //订单详情
    async getOrderDetails(num) {
      this.theOrderDetails = true;
      let res = await getDeliveryInformation(num);
      console.log(res);
      this.OrderList = res.data.data;
    },
    //订单记录
    getorderRecord() {
      console.log("345");
    },
    //订单备注
    getOrderNote() {
      console.log("678");
    },
    //打印小票
    getprintReceipts() {
      this.$message({
        message: "未开启打印功能",
        type: "error",
      });
    },
  },
};
</script>

<style>
.avatar {
  width: 30px;
  height: 30px;
}
.tab {
  display: flex;
  align-items: center;
}
.txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5px;
  width: 300px;
  display: inline-block;
}
.el-dialog__header {
  border-bottom: 1px solid #ccc;
}
.el-dialog__footer {
  border-top: 1px solid #ccc;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  margin-left: 5px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>